﻿﻿<link rel="stylesheet" type="text/css" href="~/Content/themes/base/jquery-ui.css" />
﻿<link rel="stylesheet" type="text/css" href="~/Content/content_screen/content_screen.css" />
<link rel="stylesheet" href="~/Scripts/jquery-fileupload/jquery.fileupload-ui.css" />
<link rel="stylesheet" href="~/JqueryTreeview/jquery.treeview.css" />

@model  Vms.Web.Models.PROGRAM
@{
    List<Vms.Web.Models.SCREEN> screens = ViewBag.SCREENS;
    Vms.Web.Models.SCREEN currentScreen = ViewBag.CurrentScreen;
    string action = "CreateProgram";

    int screen_id = -1;
    int program_id = -1;
    int count_content = 0;
    Vms.Web.Models.CONTENT contents = null;
    if (Model.CONTENTS.Count != 0)
    {
        action = "EditProgram";
        if (Model.CONTENTS != null && Model.CONTENTS.Count != 0)
        {
            contents = Model.CONTENTS.First();
            if (contents.CONTENT_TXT != null)
            {
                count_content = contents.CONTENT_TXT.Count;
            }
        }
        Model.Screen_id = currentScreen.Id;
        screen_id = currentScreen.Id;
    }
    if (ViewBag.ProgId != null)
    {
        program_id = ViewBag.ProgId;
    }
}
@{
    float currentscreen_width = (float)currentScreen.Width;
    float currentscreen_height = (float)currentScreen.Height;

    //currentscreen_height = currentscreen_height * (750 / currentscreen_width);

    //currentscreen_width = 750;
    float scale = 150 / currentscreen_height;
    //if (currentscreen_height>150){
    //currentscreen_width = currentscreen_width * (150 / currentscreen_height);
    currentscreen_width = (int)(scale * currentscreen_width);
    currentscreen_height = 150;
    // }
    
}

@section scripts
{
    <!-- Scrip Date Picker-->
    <script type="text/javascript">

        $(function () {
            $("#startAging_datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
            $("#endAging_datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
            $("#startTime_timepicker").timepicker();
            $("#endTime_timepicker").timepicker();

            $("#screenContainer").children().filter(".dragContent").each(function () {
             
                var max_height = parseInt($("#currentScreen_height").val());
                var max_width = parseInt($("#currentScreen_width").val());
                $(this).click(function () {
                    SelectedContent($(this).attr("id"));
                });
                $(this).draggable({ containment: "parent",
                    drag: function (event, ui) {
                        // Update on input form
                        var scale = $("#scale").val();
                        $("#X").val(parseInt($(this).position().left / scale));
                        $("#Y").val(parseInt($(this).position().top / scale));
                    }
                });

                $(this).resizable({
                    maxHeight: max_height,
                    maxWidth: max_width,
                    minHeight: 0,
                    minWidth: 0,
                    resize: function (event, ui) {
                        // Constraint size.
                        var width = parseInt($(this).position().left + $(this).width());
                        if (width > max_width) {
                            $(this).width(max_width - $(this).position().left);
                        }
                        var height = parseInt($(this).position().top + $(this).height());
                        if (height > max_height) {
                            $(this).height(max_height - $(this).position().top);
                        }
                        // Update on input form
                        var scale = $("#scale").val();
                        $("#Width").val(parseInt($(this).width() / scale));
                        $("#Height").val(parseInt($(this).height() / scale));
                        $(this).css("background-size", width + "px " + height + "px");
                    }
                });
            });

        });
    </script>
    <script type="text/javascript">
        function showMessage(msg) {
            $("#vms-message").text(msg);
            $("#vms-message").show(100);
            $("#vms-message").delay(1200);
            $("#vms-message").hide(100);
        };

        function createRtf() {
            var text = "<b>ABC</b>";

            
            alert(text);
            webBrowser.CreateControl(); // only if needed
            webBrowser.DocumentText = text;
            
            while (_webBrowser.DocumentText != text)
                Application.DoEvents();
            webBrowser.Document.ExecCommand("SelectAll", false, null);
            webBrowser.Document.ExecCommand("Copy", false, null);
            $("#Txt").Paste();
        };

        function removeData() {
            //var parent = $("#data").parent();
            //parent.remove("#data");
        };
        // enable text
        function disableText(value) {
            $("#Txt").prop('disabled', value);
            $("#FontSize").prop('disabled', value);
            $("#Bold").prop('disabled', value);
            $("#FontName").prop('disabled', value);
        };
        function createJSON() {
            var scale = $("#scale").val();
            var screen_id = $("#screen_id").val();
            var program_id = $("#program_id").val();
            
            var text_json = "{\"content_programs\": {\"screen_id\": " + screen_id + ",\"program_id\": " + program_id + ", \"scale\":" + scale + ", \"contents\": [";
            $("#screenContainer").children().filter(".dragContent").each(function () {

                var y = parseInt($(this).position().top / scale);
                var x = parseInt($(this).position().left / scale);
                var width = parseInt($(this).width() / scale);
                var height = parseInt($(this).height() / scale);
                var text = $(this).text().trim();
                var font_size = parseInt($(this).css("font-size").replace('px', '') / scale);
                var font_family = $(this).css("font-family");
                var font_weight = $(this).css("font-weight");
                var bold = false;
                if (font_weight == 'bold' || font_weight == '700') {
                    bold = true;
                }
                var color = $(this).css("color");
                var img_file = $(this).css("background-image");
                if (img_file == 'none') {
                    img_file = "";
                }
                else {
                    img_file = img_file.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');
                }
                //                var speed = $(this).children("input[id^='Speed_']").val();
                //                var method = $(this).children("input[id^='Method_']").val();
                //                var show_time = $(this).children("input[id^=ShowTime_]").val();
                var content_id = $(this).attr("id");
                var run_speed = $("#RunSpeed_" + content_id).val();
                var display_mode = $("#DisplayMode_" + content_id).val();
                var show_time = 1;
                var show_single = 0;
                if ($(this).css("white-space") == 'nowrap') {
                    show_single = 1;
                }

                text_json += "{\"y\": " + y + ", \"x\": " + x + ", \"width\": " + width + ", \"height\": " + height
                + ", \"text\": \"" + text + "\", \"font_size\": " + font_size + ", \"font_family\": \"" + font_family + "\""
                + ", \"bold\": " + bold + ", \"color\": \"" + color + "\", \"img\": \"" + img_file + "\""
                + ", \"run_speed\": " + run_speed + ", \"display_mode\": " + display_mode + ", \"show_time\": " + show_time
                + ", \"show_single\":" + show_single
                + "}, ";
            });
            var n = text_json.length;
            text_json = text_json.substring(0, n - 2);
            text_json += "]}}";
            alert(text_json);
            return text_json;

        };
        // Adding by Haipv 23/03/2014
        // Selected content.
        function SelectedContent(content) {

            $("#screenContainer").children().filter(".dragContent").each(function () {
                $(this).attr('disabled', true);
            });
            $("#screenContainer").children().not(content).css("border", "1px solid #CCC");
            $("#" + content).css("border", "3px dotted #E4E4E4");
            $("#selected_content").val(content);
            var content_id = "#"+content;
            $(content_id).attr('disabled', false);
            var scale = $("#scale").val();
            var y = parseInt($(content_id).position().top/scale);
            var x = parseInt($(content_id).position().left/scale);
            var width = parseInt($(content_id).width()/scale);
            var height = parseInt($(content_id).height()/scale);
            var text = $(content_id).text().trim();
            var font_size = parseInt($(content_id).css("font-size").replace('px', '') / scale);
            var font_family = $(content_id).css("font-family");
            var font_weight = $(content_id).css("font-weight");
            var color_text = $(content_id).css("color");
            var img_file = $(content_id).css("background-image");
            var run_speed = $("#RunSpeed_" + content).val();
            var display_mode = $("#DisplayMode_" + content).val();
            var img_file = $(content_id).css("background-image");
            var multiline = $(content_id).css("white-space");
            var color = 1;
            if (color_text == 'rgb(255, 0, 0)') {
                color = 1;
            } else if (color_text == 'rgb(0, 128, 0)') {
                color = 2;
            } else if (color_text == 'rgb(255, 255, 0)') {
                color = 3;
            } else if (color_text == 'rgb(0, 0, 255)') {
                color = 4;
            } else if (color_text == 'rgb(255, 255, 255)') {
                color = 7;
            }

//            if(img_file == 'none') {
//                disableText(false);
//            } else {
//            disableText(true);
//            }

            $("#X").val(x);
            $("#Y").val(y);
            $("#Width").val(width);
            $("#Height").val(height);
            $("#Txt").val(text);
            $("#FontSize").val(font_size);
            if (font_weight == 'Bold' || font_weight == '700') {
                $("#Bold").prop('checked', true);
            } else {
                $("#Bold").prop('checked', false);
            }
            if (multiline == 'nowrap') {
                $("#ShowSingle").prop('checked', true);
            } else {
                $("#ShowSingle").prop('checked', false);
            }
            $("#FontColor option[value='" + color + "']").attr("selected", "selected");
            $("#FontColor").css("background-color", color_text);
            $("#RunSpeed option[value='" + run_speed + "']").attr("selected", "selected");
            $("#DisplayMode option[value='" + display_mode + "']").attr("selected", "selected");
        };

        function deleteContent() {
            var content_id = $("#selected_content").val();
            $("#" + content_id).remove();
            $("#DisplayMode_" + content_id).remove();
            $("#RunSpeed_" + content_id).remove();
        }

        function initData(txt, x, y, width, height, font_size) {
            $("#Txt").val(txt);
            $("#X").val(x);
            $("#Y").val(y);
            $("#Width").val(width);
            $("#Height").val(height);
            $("#FontSize").val(font_size);
        }

        function callResize(content_id) {
         $(content_id).resizable("destroy");
            var max_height = parseInt($("#currentScreen_height").val());
            var max_width = parseInt($("#currentScreen_width").val());
            $(content_id).resizable({
                    maxHeight: max_height,
                    maxWidth: max_width,
                    minHeight: 0,
                    minWidth: 0,
                    resize: function (event, ui) {
                        // Constraint size.
                        var width = parseInt($(this).position().left + $(this).width());
                        if (width > max_width) {
                            $(this).width(max_width - $(this).position().left);
                        }
                        var height = parseInt($(this).position().top + $(this).height());
                        if (height > max_height) {
                            $(this).height(max_height - $(this).position().top);
                        }
                        // Update on input form
                        var scale = $("#scale").val();
                        $("#Width").val(parseInt($(this).width() / scale));
                        $("#Height").val(parseInt($(this).height() / scale));
                        $(this).css("background-size", width+'px ' + height+'px');
                    }
                });
        }
        
        // Create new text. 
        function CreateNewText() {
        disableText(false);
            var name = "dragContent_";
            var num = parseInt($("#num_content").val());
            var max_height = parseInt($("#currentScreen_height").val());
            var max_width = parseInt($("#currentScreen_width").val());
            var scale = $("#scale").val();
            // create
            $("#screenContainer").append("<div id=\"" + name + num + "\" class=\"dragContent\">Text Image</div>");
            // Init
            var new_id = "#" + name + num;
            $(new_id).css("width", parseInt(max_width/4) + "px");
            $(new_id).css("height", parseInt(max_height/4) + "px");
            $(new_id).css("top", "0px");
            $(new_id).css("left", "0px");
            $(new_id).css("font-size", parseInt(5 * scale) + 'px');
            $(new_id).css("white-space", "nowrap");
            $(new_id).css("line-height", parseInt(5 * scale) + 'px');
            $(new_id).css("background-image", "none");
            callResize(new_id);
            
            $(new_id).draggable({ containment: "parent",
                drag: function (event, ui) {
                    // Update on input form
                    var scale = $("#scale").val();
                    $("#X").val(parseInt($(this).position().left / scale));
                    $("#Y").val(parseInt($(this).position().top / scale));
                }
            });
            // View dotted border on selected text.
            $(new_id).click(function () {
                SelectedContent(name + num);
            });
            $("#num_content").val(num + 1);
            // Default select
            SelectedContent(name + num);
            // Create hidden
            createHidden("#hidden_data", "RunSpeed_" + name + num, 0);
            createHidden("#hidden_data", "DisplayMode_" + name + num, 0);
            // Init data
            initData("Text Image", 0, 0, parseInt(max_width/scale), parseInt(max_width/scale), 10);
        };
        // create hidden.
        function createHidden(tag, name, value) {
            $(tag).append("<input type='hidden' id='" + name + "' value='"+value+"' />");
        };
        //
        function AjaxCall() {
            var Istrue = false;
            var json = createJSON();
            $.ajax({
                url: '@Url.Action("EditContent", "ContentProgram")',
                //contentType: "text/html; charset=utf-8",
                //dataType: "json",
                //contentType: "text/html; charset=utf-8",
                //dataType: "text",
                type: "POST",
                data: { text: json }

            }).done(function () {
                Istrue = true;
                alert('ok')
            })
        .fail(function () {
            Istrue = false;
            alert('not ok');
        });
            return Istrue;
        };
    </script>
    <script type="text/javascript">
        // Numeric only control handler
        jQuery.fn.ForceNumericOnly =
    function () {
        return this.each(function () {
            $(this).keydown(function (e) {
                var key = e.charCode || e.keyCode || 0;
                // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
                return (
                    key == 8 ||
                    key == 9 ||
                    key == 46 ||
                    (key >= 37 && key <= 40) ||
                    (key >= 48 && key <= 57) ||
                    (key >= 96 && key <= 105));
            });
        });
    };

        // Text Input Change value
    jQuery.fn.TextInputChangeValue =
    function (targetId, attr, param) {
        if (attr != null) {
            return this.each(function () {
                $(this).keyup(function () {
                    var scale = $("#scale").val();
                    var size = parseInt($(this).val() * scale) + param;
                    if (targetId == null) {
                        var id = "#" + $("#selected_content").val();
                        $(id).css(attr, size);
                    }
                    else {
                        $(targetId).css(attr, size);
                    }
                });
                $(this).blur(function () {
                    var scale = $("#scale").val();
                    var val = $(this).val().trim();
                    if (val == '') {
                        $(this).val('0');
                    }
                    var size = $(this).val();
                    if (size < 8 && attr == 'font-size') {
                        size = 8 * scale + 0.5 + param;
                        $(this).val(8);
                    } else {
                        size = size *scale + param;
                    }
                    if (targetId == null) {
                        var selected_id = $("#selected_content").val();
                        $("#" + selected_id).css(attr, size);
                    } else {
                        $(targetId).css(attr, size);
                    }
                });
            });
        }
        else {
            return this.each(function () {
                $(this).keyup(function () {
                    var txt = $(this).val();
                    if (targetId == null) {
                        var id = "#" + $("#selected_content").val();
                        $(id).text(txt);

                        callResize(id);
                    } else {
                        $(targetId).text(txt);
                    }
                });
                $(this).blur(function () {
                    var txt = $(this).val();
                    if (targetId == null) {
                        var selected_id = $("#selected_content").val();
                        $("#" + selected_id).text(txt);
                        callResize("#" + selected_id);
                    } else {
                        $(targetId).text(txt);
                    }
                });
            });
        }
    };

        // Checkbox Change value
        jQuery.fn.CheckboxChangeValue =
    function (targetId, attr, value1, value2) {
        return this.each(function () {
            $(this).change(function () {
                var value = ($(this).is(':checked')) ? value1 : value2;
                if (targetId == null) {
                    var selected_targetId = "#" + $("#selected_content").val();
                    $(selected_targetId).css(attr, value);
                }
                else {
                    $(targetId).css(attr, value);
                }
            });
        });
    };

        // Select option Change value
    jQuery.fn.SelectOptionChangeValue =
    function (targetId, isValue, attr, param) {
        if (param == null)
            param = "";
        return this.each(function () {
            $(this).change(function () {
                var value = (isValue == true) ? $(this).find(":selected").val() : $(this).find(":selected").text();
                if (targetId == null) {
                    var selected_targetId = $("#selected_content").val();
                    if (attr == "DisplayMode" || attr == "RunSpeed" || attr == "ShowTime") {
                        $("#" + attr + "_" + selected_targetId).val(value);
                    } else {
                        $("#" + selected_targetId).css(attr, value);
                    }
                }
                else {
                    $(targetId).css(attr, value);
                }
            });
        });
    };
    
    </script>
    <!-- Scrip screen view -->
    <script type="text/javascript">
        $(function () {

            // Text input Only numberic
            $("#FontSize").ForceNumericOnly();
            $("#Y").ForceNumericOnly();
            $("#X").ForceNumericOnly();
            $("#Width").ForceNumericOnly();
            $("#Height").ForceNumericOnly();
     
            // Handler when text input change value.
            $("#FontSize").TextInputChangeValue(null, "font-size", "px");
            $("#FontSize").TextInputChangeValue(null, "line-height", "px");
            $("#Txt").TextInputChangeValue(null);
            $("#X").TextInputChangeValue(null, "left", "px");
            $("#Y").TextInputChangeValue(null, "top", "px");
            $("#Width").TextInputChangeValue(null, "width", "px");
            $("#Height").TextInputChangeValue(null, "height", "px");

            // Update font
            $("#Bold").CheckboxChangeValue(null, "font-weight", "bold", "normal");
            $("#FontColor").SelectOptionChangeValue("#content_txt", false, "color");
            $("#FontColor").SelectOptionChangeValue("#FontColor", false, "background-color");
            $("#FontColor").SelectOptionChangeValue(null, false, "color");
            $("#FontName").SelectOptionChangeValue(null, true, "font-family");
            $("#FontName").SelectOptionChangeValue("#FontName", true, "font-family");
            $("#DisplayMode").SelectOptionChangeValue(null, true, "DisplayMode");
            $("#RunSpeed").SelectOptionChangeValue(null, true, "RunSpeed");
            $("#ShowTime").SelectOptionChangeValue(null, true, "ShowTime");
            $("#ShowSingle").CheckboxChangeValue(null, "white-space", "nowrap", "normal");

            // Init Screen
            var currentScreenWidth = $('#currentScreen_width').attr('value');
            var currentScreenHeight = $('#currentScreen_height').attr('value');
            $('#screenContainer').css("width", '' + currentScreenWidth + 'px');
            $('#screenContainer').css("height", '' + currentScreenHeight + 'px');
        });
    
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#btnWordPad").click(function () {
                                InitializeWordPadDialog($("#wordPadDialog"));

                                $("#wordPadDialog").dialog("open");
            });

                function InitializeWordPadDialog($element) {
                $element.dialog({
                    autoOpen: false,
                    width: 200,
                    height: 300,
                    resizable: true,
                    draggable: true,
                    title: "Create text",
                    model: true,
                    show: 'slide',
                    closeText: 'x',
                    dialogClass: 'alert',
                    closeOnEscape: true,
                    open: function (event, ui) {
                        //Load the Partial View Here using Controller and Action
                        $element.load('/ContentProgram/WordPad');

                    },


                    close: function () {
                        $(this).dialog('close');
                    }

                });
            };
        });
    </script>
    <!-- scrip SELECT IMGS-------------------------------------------------------------------->
    <script type="text/javascript">
        $(document).ready(function () {

            $("#btnCreate").click(function () {
                InitializeDialog($("#departmentdialog"));

                $("#departmentdialog").dialog("open");
            });

            //Method to Initialize the DialogBox
            function InitializeDialog($element) {

                $element.dialog({
                    autoOpen: false,
                    width: 200,
                    height: 600,
                    resizable: true,
                    draggable: true,
                    title: "Choose An Image",
                    model: true,
                    show: 'slide',
                    closeText: 'x',
                    dialogClass: 'alert',
                    closeOnEscape: true,
                    open: function (event, ui) {
                        //Load the Partial View Here using Controller and Action
                        $element.load('/ContentProgram/LibImage');

                    },


                    close: function () {
                        $(this).dialog('close');
                    }

                });
                //$("#departmentdialog").dialog({ buttons: [{ text: "Ok", click: function () { $(this).dialog("close"); } }] });

            }
            // select img in dialog text
            $("#departmentdialog .spanDialog").live('click', function () {
                var selected_id = $("#selected_content").val();
                var valueImg = $(this).closest('tr').children('td:first').children('img').attr('alt');
                var imgUrl = '/Areas/Lib/Lib_Data/Imgs/' + valueImg;
                var imgWidth = $("#" + selected_id).width();
                var imgHeight = $("#" + selected_id).height();
                $("#"+selected_id).css("background-image", "url('" + imgUrl + "')");
                $("#"+selected_id).css("background-size", imgWidth + 'px ' + imgHeight + 'px');
                $("#"+selected_id).text("");
                $("#Txt").val('');
                callResize("#"+selected_id);
                disableText(true);
                $("#departmentdialog").dialog("close");

            });

        });
    </script>
    <!-- scrip SELECT TEMPLATE----------------------------------------------------------------->
    <script type="text/javascript">
        $(document).ready(function () {

            $("#btnSelectTemplate").click(function () {
                InitializeDialog($("#dlSelectTemplate"));

                $("#dlSelectTemplate").dialog("open");
            });

            //Method to Initialize the DialogBox
            function InitializeDialog($element) {

                $element.dialog({
                    autoOpen: false,
                    width: 900,
                    height: 600,
                    resizable: true,
                    draggable: true,
                    title: "Slect Template",
                    model: true,
                    show: 'slide',
                    closeText: 'x',
                    dialogClass: 'alert',
                    closeOnEscape: true,
                    open: function (event, ui) {
                        //Load the Partial View Here using Controller and Action
                        $element.load('/ContentProgram/LibContents');

                    },


                    close: function () {
                        $(this).dialog('close');
                    }

                });
                //$("#departmentdialog").dialog({ buttons: [{ text: "Ok", click: function () { $(this).dialog("close"); } }] });

            }
            // select scrent id in dialog text

            // program : blold, runspeed mothod
            $("#dlSelectTemplate .spanDialogSelectTemplate").live('click', function () {
                // fill data in img form
                var libContent_Id = $(this).closest('tr').children('#libContent_Id').val();
                var Img_x = $("#libContentImg_ImgX" + libContent_Id).val();
                var Img_y = $("#libContentImg_ImgY" + libContent_Id).val();
                var Img_Width = $("#libContentImg_ImgWidth" + libContent_Id).val();
                var Img_Height = $("#libContentImg_ImgHeight" + libContent_Id).val();
                var DisplayMode = $("#libContentImg_ImgMethod" + libContent_Id).val();
                var RunSpeed = $("#libContentImg_ImgRunSpeed" + libContent_Id).val();
                var ImgFileName = $("#libContentImg_ImgImages" + libContent_Id).val();
                //alert(DisplayMode);
                // set up form imgs
                $("#ImgFileName").val(ImgFileName);
                $("#Img_x").val(Img_x);
                $("#Img_y").val(Img_y);
                $("#Img_Width").val(Img_Width);
                $("#Img_Height").val(Img_Height);
                $("#DisplayMode").find('option').removeAttr("selected");
                $("#DisplayMode option[value='" + DisplayMode + "']").attr("selected", "selected");
                $("#RunSpeed").find('option').removeAttr("selected");
                $("#RunSpeed option[value='" + RunSpeed + "']").attr("selected", "selected");

                // set up views
                var imgUrl = '/Areas/Lib/Lib_Data/Imgs/' + ImgFileName;
                $('#dragThisImg').css("background", 'url(' + imgUrl + ') no-repeat');
                $('#dragThisImg').css("background-size", Img_Width + 'px ' + Img_Height + 'px');
                $('#dragThisImg').css("width", '' + Img_Width + 'px');
                $('#dragThisImg').css("height", '' + Img_Height + 'px');
                $('#dragThisImg').css("left", '' + Img_x + 'px');
                $('#dragThisImg').css("top", '' + Img_y + 'px');

                // fill date in txt form
                var Txt = $("#libContentTxt_Txt" + libContent_Id).val();
                var Txt_x = $("#libContentTxt_TxtX" + libContent_Id).val();
                var FontName = $("#libContentTxt_TxtFontName" + libContent_Id).val();
                var Txt_y = $("#libContentTxt_TxtY" + libContent_Id).val();
                var FontSize = $("#libContentTxt_TxtFontSize" + libContent_Id).val();
                var Txt_Width = $("#libContentTxt_TxtWidth" + libContent_Id).val();
                var Bold = $("#libContentTxt_TxtBold" + libContent_Id).val();
                var Txt_Height = $("#libContentTxt_TxtHeight" + libContent_Id).val();
                var FontColor = $("#libContentTxt_TxtFontColor" + libContent_Id).val();
                var DisplayMode = $("#libContentTxt_TxtMethod" + libContent_Id).val();
                var RunSpeed = $("#libContentTxt_TxtRunSpeed" + libContent_Id).val();
                //alert(Bold);

                // set data in form txt
                $("#Txt").val(Txt);
                $("#Txt_x").val(Txt_x);
                $("#Txt_y").val(Txt_y);
                $("#Txt_Width").val(Txt_Width);
                $("#Txt_Height").val(Txt_Height);
                $("#FontSize").val(FontSize);


                $("#FontName").find('option').removeAttr("selected");
                $("#FontName option[value='" + FontName + "']").attr("selected", "selected");

                $("#FontColor").find('option').removeAttr("selected");
                $("#FontColor option[value='" + FontColor + "']").attr("selected", "selected");

                $("#DisplayMode").find('option').removeAttr("selected");
                $("#DisplayMode option[value='" + DisplayMode + "']").attr("selected", "selected");

                $("#RunSpeed").find('option').removeAttr("selected");
                $("#RunSpeed option[value='" + RunSpeed + "']").attr("selected", "selected");
                // set data in views
                $("#content_txt").text(Txt);
                $('#dragThisText').css("width", '' + Txt_Width + 'px');
                $('#dragThisText').css("height", '' + Txt_Height + 'px');
                $('#dragThisText').css("left", '' + Txt_x + 'px');
                $('#dragThisText').css("top", '' + Txt_y + 'px');


                $("#dlSelectTemplate").dialog("close");
            });

        });
    </script> 
}
<!-- CSS scream view -->
<div id="content_program">
    <div id="leftsidebar">
        <ul id="browser" class="filetree">
            @foreach (var screen in screens)
            {
                <li>
                    @if (currentScreen != null && currentScreen.Id == currentScreen.Id)
                    {
                        <span class="folder"><b>@Html.ActionLink(screen.Name, "Index", new { screenId = screen.Id })</b></span>
                    }
                    else
                    {
                        <span class="folder">@Html.ActionLink(screen.Name, "Index", new { screenId = screen.Id })</span>
                    }
                    <ul>
                        @foreach (var program in screen.PROGRAMS.ToList())
                        {
                            <li>
                                @if (program.Id == ViewBag.ProgId)
                                {
                                    <span class="file"><b>@Html.ActionLink(program.Name, "Index", new { screenId = screen.Id, progId = program.Id })</b></span>
                                }
                                else
                                {
                                    <span class="file">@Html.ActionLink(program.Name, "Index", new { screenId = screen.Id, progId = program.Id })
                                    </span>
                                }
                            </li>
                        }
                    </ul>
                </li>
            }
        </ul>
    </div>
    <div id="rightcontent">
        <div id="screenContainer">
            @if (contents != null && contents.CONTENT_TXT != null)
            {
                foreach (var content_txt in contents.CONTENT_TXT.ToList())
                {
                    var top = content_txt.Txt_y * scale;
                    var left = content_txt.Txt_x * scale;
                    var width = content_txt.Txt_Width * scale;
                    var height = content_txt.Txt_Height * scale;
                    var font_size = content_txt.FontSize * scale;
                    var show_single = "normal";
                    if (content_txt.ShowSingleLine == 1)
                    {
                        show_single = "nowrap";
                    }
                    var img = "";
                    var txt = "";
                    if (content_txt.Txt != null)
                    {
                        txt = content_txt.Txt.Trim();
                    }
                    if (content_txt.Txt.IsEmpty() && content_txt.TxtFileName.EndsWith("bmp"))
                    {
                        img = "background-image: url('/Areas/Lib/Lib_Data/Imgs/" + content_txt.TxtFileName + "')";
                    }
                    var color = "#F00";
                    switch (content_txt.FontColor)
                    {
                        case 1:
                            color = "#F00";
                            break;
                        case 2:
                            color = "#008000";
                            break;
                        case 3:
                            color = "#FF0";
                            break;
                        case 4:
                            color = "#00F";
                            break;
                        case 7:
                            color = "#FFF";
                            break;
                        default:
                            color = "#F00";
                            break;
                    }
                
                <div id="dragContent_@content_txt.Id" class="dragContent" 
                    style="top:@{@top}px; left:@{@left}px; width:@{@width}px; height:@{@height}px; font-size:@{@font_size}px; line-height:@{@font_size}px;display: block; @img; white-space: nowrap;color:@color; white-space:@show_single">
                    @txt
                </div>
                }
            }
        </div>
        <div id="vms-message">
        </div>
        <div id="contentContainer">
            <ul class="tabs" persist="true">
                <li><a href="#" rel="view1">Program</a></li>
                <li><a href="#" rel="view2">Content</a></li>
            </ul>
            <div class="tabcontents">
                <!-- Program content-------------------------------------------------------------->
                <div id="view1" class="tabcontent">
                    @using (Ajax.BeginForm(action, "ContentProgram", new AjaxOptions
                    {
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "POST",
                        OnComplete = "showMessage('Update Success!')",
                        OnFailure = "showMessage('Update Failure!')"
                    }))
                    {
                        @Html.Hidden("Screen_id", currentScreen.Id)
                        @Html.HiddenFor(model => model.Id) 
                        @Html.Partial("_CreateOrEditProgram", Model)
                    }
                </div>
                <!--end div #program-form -->
                <!-- Content txt & igms content-------------------------------------------------->
                <div id="view2" class="tabcontent">
                    <div style="">
                        <!--style= border-bottom: 1px solid #B7B7B7; -->
                        @if (@Model.CONTENTS.Count != 0)
                        {
                            //using (Ajax.BeginForm("EditContent", "ContentProgram", new AjaxOptions
                            //    {
                            //        HttpMethod = "POST",
                            //        OnBegin = "AjaxCall()"
                            //        //InsertionMode = InsertionMode.Replace,
                            //        //HttpMethod = "POST",
                            //        //OnComplete = "removeData()",
                            //        //OnFailure = "showMessage('Update Failure!')",
                            //        //OnBegin = "createJSON()"
                            //    }))
                            {
                            @Html.Hidden("Content_ID", Model.CONTENTS.First().Id)
                            @Html.Hidden("data", "")  
                            <div class="content-name">
                                <span>Content Name</span>
                                @*@Html.TextBox("Content_Name", Model.CONTENTS.First().Name)*@
                            </div>
                             
@* @Html.Partial("_EditImage", Model.CONTENTS.First().CONTENT_IMG.First());
                            @Html.Partial("_EditText", Model.CONTENTS.First().CONTENT_TXT.First());*@
                            @Html.Partial("TextImage");                                                                                
                            <span id="btnCreate" class="btn btn-success fileinput-button" style="float: right;">
                                <i class="icon-plus icon-white"></i><span>Images</span></span>
                            <input type="submit" class="btn btn-primary" value="Save" style="float: left; margin-left: 5px;" />
                            @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-primary program-content-cancel" })
                                        
                            }

                        }
                        <div class="clearfix">
                        </div>
                    </div>
                    <button onclick="CreateNewText()">
                        Create</button>
                    <button onclick="AjaxCall()">
                        JSON</button>
                    <button onclick="deleteContent()">
                        Delete</button>
                        <button  id="btnWordPad">
                        Create text</button>
                </div>
                <!-- End div#view 2 : Content txt & igms content -->
            </div>
        </div>
        <!-- end contenContainer -->
    </div>
    <div class="clearfix">
    </div>
    <div class="dialog">
    </div>
    <div id="departmentdialog" title="Add Department">
    </div>
    <div id="wordPadDialog" title="wordPadDialog">
    </div>
    <div id="hidden_data">
    @Html.Hidden("currentScreen_width", currentscreen_width)
    @Html.Hidden("currentScreen_height", currentscreen_height)
    @Html.Hidden("scale", scale)
    @Html.Hidden("num_content", 0)
    @Html.Hidden("selected_content", "")
    @Html.Hidden("screen_id", screen_id)
    @Html.Hidden("program_id", program_id)
    @Html.Hidden("has_content", count_content)
    @if (contents != null && contents.CONTENT_TXT != null)
    {
        foreach (var content_txt in contents.CONTENT_TXT.ToList())
        {
            var run_speed = content_txt.RunSpeed;
            var display_mode = content_txt.DisplayMode;
            <input id="RunSpeed_dragContent_@content_txt.Id" type="hidden" value="@run_speed" />
                    <input id="DisplayMode_dragContent_@content_txt.Id" type="hidden" value="@display_mode"/>
        }
    }
    </div>
</div>
